<template>
	<view>
		<view class="page-foot bg-white ">
			<view class="input-foot-box m-hairline--top flex-box">
				<view class="input-box flex-box flex-1 plr25">
					<image class="icon1 mr15" src="/static/icon/icon_edit1.png" mode="aspectFit"></image>
					<input v-model="content" confirm-type="send" @confirm="addComment()" class="m-input flex-1 col-3" type="text" placeholder="说你想说的..." />
				</view>

				<button class="m-button flex-box flex-center" open-type="share">
					<image class="icon mr10" src="/static/icon/icon_share5.png" mode="aspectFit"></image>
					<view class="fs26 col-3">分享</view>
				</button>

				<view class="ptb10 flex-box" @click="">
					<image class="icon2 mr10 ml30" src="/static/icon/icon_comment1.png" mode="aspectFit"></image>
					<view class="fs26 col-3">{{ courseData.comment_count }}</view>
				</view>

				<button class="m-button flex-box flex-center ptb5" @click="toggleFav(courseData.id)">
					<image class="icon2 mr10" v-if="courseData.is_fav_count == 0" src="/static/icon/icon_thumbs_normal.png" mode="aspectFit"></image>
					<image class="icon2 mr10" v-else src="/static/icon/icon_thumbs_selected.png" mode="aspectFit"></image>
					<view class="fs26 col-3">{{ courseData.fav_count }}</view>
				</button>
			</view>
		</view>
		<view class="container">
			<view class="post-box bg-white">
				<view class="post-item ptb40 plr30">
					<view class="flex-box mb30 flex-align-start">
						<view class="flex-1">
							<view class="mb15 fs30 col-3 fwb">{{ courseData.name }}</view>
							<view class="fs24 col-9"></view>
						</view>
					</view>

					<view class="pb30 m-hairline--bottom fs26 col-9 mb30">{{ $formatDatetime(courseData.updatetime, 'yyyy-mm-dd hh:ii:ss') }}</view>
					<!-- <image src="/static/images/img_banner1.png" class="img mb40" mode="widthFix"></image> -->
					
					<view class="text" :class="{'show': isBuy}">
						<rich-text :nodes="courseData.content"></rich-text>
						<view class="text-mask" v-if="!isBuy">
						</view>
						
						<!-- #ifdef H5 -->
						<view class="buy-box" >
							<view class="fs34 col-3 mb20" >继续阅读需要付费<text class="col-normal">{{courseData.salesprice}}</text>元</view>
							<view class="btn-buy g-btn1 mini" @click="buyArticle">立即购买</view>
						</view>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<view class="buy-box" v-if="!isBuy && (platformStatus == 1 || !isIos)">
							<view class="fs34 col-3 mb20" >继续阅读需要付费<text class="col-normal">{{courseData.salesprice}}</text>元</view>
							<view class="btn-buy g-btn1 mini" @click="buyArticle">立即购买</view>
						</view>
						<!-- #endif -->
					</view>
					
					
					
					
					<!-- <view class="flex-box flex-end mt20">
						<button class="m-button flex-box flex-center" open-type="share">
							<image class="icon mr10" src="/static/icon/icon_share5.png" mode="aspectFit"></image>
							<view class="fs26 col-3">分享</view>
						</button>
						<button class="m-button flex-box flex-center">
							<image class="icon mr10" src="/static/icon/icon_comment1.png" mode="aspectFit"></image>
							<view class="fs26 col-3">{{ courseData.comment_count }}</view>
						</button>
						<button class="m-button flex-box flex-center" @click="toggleFav(courseData.id)">
							<image v-if="courseData.is_fav_count == 0" class="icon mr10" src="/static/icon/icon_thumbs_normal.png" mode="aspectFit"></image>
							<image v-else class="icon mr10" src="/static/icon/icon_thumbs_selected.png" mode="aspectFit"></image>
							<view class="fs26 col-3">{{ courseData.fav_count }}</view>
						</button>
					</view> -->
				</view>
			</view>
			<!-- 评论 -->
			<view class="comment-box p30">
				<view class="flex-box mb35">
					<view class="fs28 col-3 mr5">评论</view>
					<view class="fs28 col-3 fwb flex-1">{{ courseData.comment_count }}</view>
					<view class="fs24 col-3">点赞{{ courseData.fav_count }}</view>
					<!-- <view class="mlr15 fs20 col-gray">|</view>
					<view class="fs24 col-3">转发</view> -->
				</view>
				<!-- 评论 -->
				<view class="comment-item flex flex-align-start ptb25" v-for="(item, index) in commentList" :key="item.id">
					<image class="img-head mr20" :src="item.user.avatar" mode="aspectFill"></image>
					<view class="flex-1 mt10">
						<view class="flex-box mb20">
							<view class="fs28 col-3 flex-1">{{ item.user.nickname }}</view>
							<view class="fs24 col-9">{{ $formatDatetime(item.createtime, 'yyyy-mm-dd hh:ii:ss') }}</view>
						</view>
						<view class="text">{{ item.content }}</view>
						<!-- 回复 -->
						<!-- <view class="reply-item flex flex-align-start pt30">
							<image class="img-head mr20" src="/static/icon/img_service.png" mode="aspectFill"></image>
							<view class="flex-1 mt10">
								<view class="flex-box mb20">
									<view class="fs28 col-3 flex-1">喜乐长安</view>
									<view class="fs24 col-9">12月4日 18:24</view>
								</view>
								<view class="text">这是内容这是内容这是内</view>
							</view>
						</view> -->
					</view>
				</view>
				<view class="g-btn3-wrap">
					<view class="g-btn3" :class="{ nomore: commentListMore.nomore == true || commentListMore.loading == true }" @click="getCourseComment()">{{ commentListMore.text }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const util = require('../../xiluedu/util.js');
export default {
	data() {
		return {
			course_id: 0,
			courseData: {},
			commentList: [],
			commentListMore: { page: 1 },
			content: '',
			isBuy:true,
			platformStatus: 0,
			isIos: getApp().globalData.isIos,
		};
	},
	onLoad(e) {
		this.course_id = e.course_id;
		this.fetchConfig()
		this.getCourseDetail();
		this.getCourseComment();
		
		//支付成功后
		let that = this;
		uni.$on('buySuccess',function(data){
			that.getCourseDetail();
		})
	},
	onShareAppMessage(e) {
		if (e.from == 'button') {
			let courseData = this.courseData;
			return {
				title: courseData.name,
				imageUrl: courseData.thumb_image,
				path: ''
			};
		}
	},
	methods: {
		fetchConfig(){
			//支付开关
			this.$core.get({
				url: 'xiluedu.config/config',
				data: {name:'shopinfo'},
				success: ret => {
					//if(ret.data.vip_status != 'undefined'){
					this.platformStatus = ret.data.vip_status || 0;
					//}
				},
				loading: false
			});
		},
		getCourseDetail() {
			this.$core.get({
				url: 'xiluedu.course/detail',
				data: { course_id: this.course_id },
				success: ret => {
					//ret.data.updatetime_text = util.formatDatetime(ret.data.updatetime,"yyyy-mm-dd hh:ii:ss")
					this.courseData = ret.data;
					this.isBuy = ((ret.data.is_charge == 1 && !ret.data.is_vip && !ret.data.is_buy) || (ret.data.is_charge == 2 && !ret.data.is_buy)) && !ret.data.is_free ?false :true;
				}
			});
		},
		getCourseComment() {
			util.fetch(this, 'xiluedu.course_comment/lists', { pagesize: 10, course_id: this.course_id }, 'commentListMore', 'commentList', 'data', data => {});
		},
		//评价
		addComment() {
			let content = this.content.trim();
			if (content == '') {
				uni.showToast({ title: '评论内容不得为空', icon: 'none' });
				return false;
			}
			this.$core.post({
				url: 'xiluedu.course_comment/add_comment',
				data: { course_id: this.course_id, content: content },
				success: ret => {
					uni.showToast({ title: '评论成功', icon: 'none' });
				}
			});
		},
		// 点赞
		toggleFav() {
			this.$core.post({
				url: 'xiluedu.course/toggle_fav',
				data: { course_id: this.course_id },
				success: ret => {
					this.getCourseDetail();
				},
				fail: err => {}
			});
		},
		buyArticle(){
			if(!this.$user.getUserinfo(true)){
				return false;
			}
			let courseDetail = this.courseData;
			if(courseDetail.is_charge == 0){
				uni.showToast({title:'免费课程无需购买',icon: "none"});
				return false;
			}else if(courseDetail.is_charge == 1){
				if(courseDetail.is_vip){
					uni.showToast({title:'您已是Vip无需购买',icon: "none"});
					return false;
				}else if(courseDetail.is_buy){
					uni.showToast({title:'您已购买,请勿重复购买',icon: "none"});
					return false;
				}
			}else{
				if(courseDetail.is_buy){
					uni.showToast({title:'您已购买,请勿重复购买',icon: "none"});
					return false;
				}
			}
			// 可购买
			uni.navigateTo({
				url: '/pages/confirm_order/confirm_order?course_id='+courseDetail.id
			})
		}
	}
};
</script>

<style scoped>
.post-box {
	border-bottom: 20rpx solid #f7f7f7;
}
.post-box .post-item {
	border-bottom: 1rpx solid #f7f7f7;
}
.post-box .img-head {
	display: block;
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}
.post-box .btn1 {
	width: 80rpx;
	height: 36rpx;
	border: 1rpx solid #ececec;
	border-radius: 4rpx;
	font-size: 24rpx;
	font-weight: 500;
	color: #333333;
	line-height: 32rpx;
	text-align: center;
}
.post-box .btn2 {
	font-size: 24rpx;
	font-weight: 500;
	color: #999999;
}
.post-box .text {
	position: relative;
	font-size: 28rpx;
	font-weight: 500;
	color: #333333;
	line-height: 46rpx;
	height: 400rpx;
	overflow: hidden;
}
.post-box .text.show{
	height: auto;
}

.post-box .text-mask{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 150rpx;
	background-color: #FFF;
	filter: blur(5px);
	opacity: .9;
	z-index: 1;
}

.post-box .buy-box{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 5rpx 0;
	text-align: center;
	z-index: 2;
}

.post-box .btn-buy{
	margin: 0 auto;
	height: 80rpx;
	line-height: 80rpx;
}

.post-box image {
	display: block;
}
.post-box .img1 {
	margin: 0 0 20rpx;
	width: 418rpx;
	height: 428rpx;
}
.post-box .img2 {
	margin: 0 12rpx 12rpx 0;
	width: 304rpx;
	height: 278rpx;
}
.post-box .img2:nth-of-type(2n) {
	margin: 0 0 12rpx;
}
.post-box .img3 {
	margin: 0 12rpx 12rpx 0;
	width: 200rpx;
	height: 200rpx;
}
.post-box .img3:nth-of-type(3n) {
	margin: 0 0 12rpx;
}
.post-box .topic {
	font-size: 26rpx;
	font-weight: 500;
	color: #5964b8;
}
.post-box .img {
	display: block;
	width: 100%;
	height: auto;
}
/* .post-box .topic::before {
	content: '#';
}
.post-box .topic::after {
	content: '#';
} */
.post-box .icon {
	display: block;
	width: 28rpx;
	height: 28rpx;
}
.post-box .m-button {
	margin-left: 60rpx;
	line-height: 30rpx;
}
/*  */
.comment-box .img-head {
	display: block;
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
}
.comment-box .text {
	font-size: 28rpx;
	font-weight: 500;
	color: #333333;
	line-height: 48rpx;
}
/*  */
.page-foot .input-foot-box {
	padding: 25rpx 30rpx;
}
.page-foot .input-box {
	height: 76rpx;
	background: #f7f7f7;
	border-radius: 38rpx;
}
.page-foot .icon {
	display: block;
	width: 28rpx;
	height: 28rpx;
}
.page-foot .icon1 {
	display: block;
	width: 40rpx;
	height: 40rpx;
}
.page-foot .icon2 {
	display: block;
	width: 28rpx;
	height: 28rpx;
}
.page-foot .m-input {
	font-size: 26rpx;
	font-weight: 500;
	line-height: 40rpx;
}
.page-foot .m-button {
	line-height: 30rpx;
	padding: 10rpx 0;
	margin: 0 0 0 30rpx;
	text-align: center;
	background-color: transparent;
	border: none;
	width: auto;
}
.page-foot .m-button::after {
	display: none;
}
</style>
